<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.time.format.DateTimeFormatter" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正在考试 - ${exam.examName}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .exam-header {
            position: sticky;
            top: 0;
            z-index: 1020;
            background-color: #f8f9fa;
            padding: 1rem;
            border-bottom: 1px solid #dee2e6;
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
        }
        .question {
            margin-bottom: 2.5rem;
            padding: 1.5rem;
            border: 1px solid #eee;
            border-radius: 8px;
            background-color: #fff;
        }
        .question-title {
            font-weight: bold;
            margin-bottom: 1rem;
        }
        .options .form-check {
            margin-bottom: 0.5rem;
        }
    </style>
</head>
<body>

<div class="exam-header">
    <div class="container d-flex justify-content-between align-items-center">
        <h4 class="mb-0">${exam.examName}</h4>
        <div class="h5 mb-0">
            <i class="fa fa-clock-o"></i> 剩余时间: <span id="timer" class="fw-bold text-danger">--:--</span>
        </div>
    </div>
</div>

<div class="container mt-4">
    <form id="examForm" action="${pageContext.request.contextPath}/exams" method="post">
        <input type="hidden" name="examId" value="${exam.examId}">

        <c:choose>
            <c:when test="${not empty questions}">
                <c:forEach var="question" items="${questions}" varStatus="status">
                    <div class="question">
                        <p class="question-title">${status.count}. ${question.questionText}</p>
                        <div class="options">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="q_${question.questionId}" id="q${question.questionId}a" value="A">
                                <label class="form-check-label" for="q${question.questionId}a">A. ${question.optionA}</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="q_${question.questionId}" id="q${question.questionId}b" value="B">
                                <label class="form-check-label" for="q${question.questionId}b">B. ${question.optionB}</label>
                            </div>
                            <c:if test="${not empty question.optionC}">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="q_${question.questionId}" id="q${question.questionId}c" value="C">
                                    <label class="form-check-label" for="q${question.questionId}c">C. ${question.optionC}</label>
                                </div>
                            </c:if>
                            <c:if test="${not empty question.optionD}">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="q_${question.questionId}" id="q${question.questionId}d" value="D">
                                    <label class="form-check-label" for="q${question.questionId}d">D. ${question.optionD}</label>
                                </div>
                            </c:if>
                        </div>
                    </div>
                </c:forEach>
            </c:when>
            <c:otherwise>
                <div class="alert alert-warning text-center">
                    <i class="fa fa-exclamation-triangle"></i> 本场考试暂无题目，请联系管理员。
                </div>
            </c:otherwise>
        </c:choose>

        <c:if test="${not empty questions}">
            <div class="text-center my-5">
                <button type="submit" class="btn btn-primary btn-lg">
                    <i class="fa fa-check-circle"></i> 提交试卷
                </button>
            </div>
        </c:if>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const examDuration = ${exam.duration}; // 分钟
    const examStartTime = new Date().getTime();
    const endTime = examStartTime + examDuration * 60 * 1000;
    const timerElement = document.getElementById('timer');
    const examForm = document.getElementById('examForm');

    const timerInterval = setInterval(updateTimer, 1000);

    function updateTimer() {
        const now = new Date().getTime();
        const distance = endTime - now;

        if (distance < 0) {
            clearInterval(timerInterval);
            timerElement.textContent = "时间到！";
            alert('考试时间到，试卷将自动提交。');
            examForm.submit();
            return;
        }

        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        timerElement.textContent = 
            (minutes < 10 ? '0' : '') + minutes + ":" + 
            (seconds < 10 ? '0' : '') + seconds;
    }

    updateTimer();
});
</script>
</body>
</html> 